<template name="regionPicker">
  <view>
    <picker
      mode="multiSelector"
      :range="range"
      :value="dataValue"
      :disabled="dataDisabled"
      @change="region_change"
      @columnchange="region_change_col"
      @cancel="region_cancel"
    >
      <slot></slot>
    </picker>
  </view>
</template>
<script>
import zones_data from './region-picker.js'
export default {
  name: 'regionPicker',
  props: {
    value: { type: [Array, String], default: [0, 0, 0] },
    disabled: { type: Boolean, default: false },
    //like https://api.591tuangou.com/cache/region-picker.php
    jsonPath: { type: String, default: null },
  },
  data() {
    return {
      dataValue: [],
      dataDisabled: false,
      range: [],
      zones_tree: [],
    }
  },
  created: function(e) {
    if (this.jsonPath) {
      uni.request({
        url: this.jsonPath,
        success: res => {
          this.zones_tree = res.data
          this.dataDisabled = this.disabled
          this.value_format()
          this.range_set()
        },
      })
    } else {
      ;(this.zones_tree = zones_data.zones_tree),
        (this.dataDisabled = this.disabled)
      this.value_format()
      this.range_set()
    }
  },
  methods: {
    value_format() {
      var value = this.value
      if (typeof value == 'string' && value.indexOf(',') > 0) {
        value = value.split(',')
      }
      var sk = 0,
        ck = 0,
        zk = 0
      if (typeof value == 'string') {
        this.zones_tree.forEach((sv, si) => {
          sv.children.forEach((cv, ci) => {
            cv.children.forEach((zv, zi) => {
              if (zv.code == value) {
                sk = si
                ck = ci
                zk = zi
              }
            })
          })
        })
        this.dataValue = [sk, ck, zk]
      } else if (typeof value[0] == 'string' || value[0] > 999) {
        this.zones_tree.forEach((sv, si) => {
          if (sv.code == value[0]) {
            sk = si
            sv.children.forEach((cv, ci) => {
              if (cv.code == value[1]) {
                ck = ci
                cv.children.forEach((zv, zi) => {
                  if (zv.code == value[2]) {
                    zk = zi
                  }
                })
              }
            })
          }
        })
        this.dataValue = [sk, ck, zk]
      } else {
        this.dataValue = value
      }
    },
    range_set() {
      var zones_ary = [[], [], []]
      this.zones_tree.forEach((sv, si) => {
        zones_ary[0].push(sv.name)
        if (si == this.dataValue[0]) {
          sv.children.forEach((cv, ci) => {
            zones_ary[1].push(cv.name)
            if (ci == this.dataValue[1]) {
              cv.children.forEach((zv, zi) => {
                zones_ary[2].push(zv.name)
              })
            }
          })
        }
      })
      this.range = zones_ary
    },
    region_change(e) {
      var v = e.detail.value
      var value = [],
        code = []
      var sv = this.zones_tree[v[0]]
      value.push(sv.name)
      code.push(sv.code)
      var cv = sv.children[v[1]]
      value.push(cv.name)
      code.push(cv.code)
      var zv = cv.children[v[2]]
      value.push(zv.name)
      code.push(zv.code)
      e.detail = { code: code, value: value, data: zv }
      this.$emit('change', e)
    },
    region_change_col(e) {
      this.dataValue[e.detail.column] = e.detail.value
      this.range_set()
      this.$emit('columnchange', e)
    },
    region_cancel(e) {
      this.$emit('cancel', e)
    },
  },
}
</script>
<style></style>
